<template>
    <div id="pieChart" style="height: 700px; width: 600px; margin-left: 500px"></div>
</template>

<script>
import * as echarts from 'echarts'
import { findTimeNum } from '../../../http/request'

export default {
  name: 'index.vue',
  data () {
    return {
      time: [],
      num: []
    }
  },
  mounted () {
    this.pieChart()
    findTimeNum().then(res => {
      for (let r in res.data) {
        console.log(res.data[r])
        this.time.push(res.data[r].time)
        this.num.push(res.data[r].num)
      }
      this.pieChart()
    })
  },
  methods: {
    pieChart () {
      let pieChart = echarts.init(document.getElementById('pieChart'))
      pieChart.setOption({
        title: {
          text: '所有站台各时段流量图',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '返回站台时段流量图',
            type: 'pie',
            radius: '70%',
            data: [
              { value: this.num[0], name: this.time[0], itemStyle: { color: '#F62120' } },
              { value: this.num[1], name: this.time[1], itemStyle: { color: '#FF9600' } },
              { value: this.num[2], name: this.time[2], itemStyle: { color: '#D1624C' } },
              { value: this.num[3], name: this.time[3], itemStyle: { color: '#84A729' } },
              { value: this.num[4], name: this.time[4], itemStyle: { color: '#5DC5E8' } }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    }
  }
}
</script>

<style scoped>

</style>
